import { security } from "@mall/api-services"
import _ from "lodash"
import Vue from "vue"
import VueRouter, { RouteConfig } from "vue-router"

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    component: () => import("../views/home"),
  },
  {
    path: "/search",
    name: "Search",
    component: () => import("../views/search"),
  },
  {
    path: "/categories",
    name: "categories",
    component: () => import("../views/categories"),
  },
  {
    path: "/cart",
    name: "Cart",
    component: () => import("../views/cart"),
    meta: { requiresAuth: true },
  },
  {
    path: "/my-center",
    name: "MyCenter",
    component: () => import("../views/my-center"),
    meta: { requiresAuth: true },
  },
  {
    path: "/login",
    name: "Login",
    props: (route) => ({
      mobile: route.query.mobile,
      grantType: route.query.grant_type,
    }),
    component: () => import("../views/user").then(user => user.Login),
  },
  {
    path: "/register",
    name: "Register",
    props: true,
    component: () => import("../views/user").then(user => user.Register),
  },
  {
    path: "/customers/:id",
    name: "CustomerDetail",
    props: true,
    component: () => import("../views/customer").then(customer => customer.Detail),
    meta: { requiresAuth: true },
  },
  {
    path: "/customers/:id/avatar",
    name: "CustomerAvatarCropper",
    props: (route) => ({
      id: route.params.id,
      avatar: route.query.avatar,
    }),
    component: () => import("../views/customer").then(customer => customer.AvatarCropper),
    meta: { requiresAuth: true },
  },
  {
    path: "/customers/:id/nickname/:nickname",
    name: "CustomerSetNickname",
    props: true,
    component: () => import("../views/customer").then(customer => customer.SetNickname),
    meta: { requiresAuth: true },
  },
  {
    path: "/browsing-products",
    name: "BrowsingProducts",
    component: () => import("../views/browsing").then(browsing => browsing.ProductList),
    meta: { requiresAuth: true },
  },
  {
    path: "/follow-products",
    name: "FollowProducts",
    component: () => import("../views/follow").then(follow => follow.ProductList),
    meta: { requiresAuth: true },
  },
  {
    path: "/follow-stores",
    name: "FollowStores",
    component: () => import("../views/follow").then(follow => follow.StoreList),
    meta: { requiresAuth: true },
  },
  {
    path: "/products",
    name: "Products",
    component: () => import( "../views/product").then(product => product.List),
    props: (route) => ({
      name: route.query.name,
    }),
  },
  {
    path: "/products/:id",
    name: "Product",
    component: () => import( "../views/product"),
    props: true,
  },
  {
    path: "/products/:id/404",
    name: "ProductNotFound",
    component: () => import( "../views/product").then(product => product.NotFound),
    props: true,
  },
  {
    path: "/checkouts/:id",
    name: "Checkout",
    component: () => import( "../views/checkout"),
    props: true,
  },
  {
    path: "/stores/:id",
    component: () => import( "../views/store"),
    redirect: "/stores/:id/home",
    props: true,
    children: [
      {
        path: "home",
        name: "StoreHome",
        props: true,
        component: () => import( "../views/store").then(store => store.Home),
      },
      {
        path: "products",
        name: "StoreProducts",
        props: (route) => ({
          id: route.params.id,
          collections: route.query.collections,
        }),
        component: () => import( "../views/store").then(store => store.Products),
      },
      {
        path: "/stores/:id/collections",
        name: "StoreCollections",
        props: true,
        component: () => import( "../views/store").then(store => store.Collections),
      }],
  },
  {
    path: "/addresses",
    name: "Addresses",
    component: () => import("../views/address").then(address => address.List),
    props: true,
    meta: { requiresAuth: true },
  },
  {
    path: "/addresses/new",
    name: "NewAddress",
    component: () => import("../views/address").then(address => address.New),
    props: true,
    meta: { requiresAuth: true },
  },
  {
    path: "/addresses/:id/edit",
    name: "EditAddress",
    component: () => import("../views/address").then(address => address.Edit),
    props: true,
    meta: { requiresAuth: true },
  },
  {
    path: "/payments",
    name: "NewPayment",
    component: () => import("../views/payment"),
    props: (route) => ({
      orderIds: route.query.order_ids,
      totalAmount: route.query.total_amount,
    }),
    meta: { requiresAuth: true },
  },
  {
    path: "/payments/:id",
    name: "Payment",
    props: true,
    component: () => import("../views/payment").then(payment => payment.Result),
    meta: { requiresAuth: true },
  },
  {
    path: "/orders",
    name: "OrderList",
    props: (route) => ({
      statuses: _.split(route.query.statuses as string, ","),
    }),
    component: () => import("../views/order").then(order => order.List),
    meta: { requiresAuth: true },
  },
  {
    path: "/refunds",
    name: "OrderRefundList",
    props: true,
    component: () => import("../views/order").then(order => order.RefundList),
    meta: { requiresAuth: true },
  },
  {
    path: "/orders/:id",
    name: "OrderDetail",
    props: true,
    component: () => import("../views/order").then(order => order.Detail),
    meta: { requiresAuth: true },
  },
  {
    path: "/orders/:id/refunds",
    name: "RefundApplySelectList",
    props: (route) => ({
      orderId: route.params.id,
      kind: route.query.kind,
      itemIds: _.split(route.query.item_ids as string, ","),
    }),
    component: () => import("../views/order").then(order => order.RefundApplySelectList),
    meta: { requiresAuth: true },
  },
  {
    path: "/orders/:id/refunds/apply",
    name: "OrderRefundApplyList",
    props: (route) => ({
      kind: route.query.kind,
      orderId: route.params.id,
      itemIds: _.split(route.query.item_ids as string, ","),
    }),
    component: () => import("../views/order").then(order => order.RefundApplyList),
    meta: { requiresAuth: true },
  },
  {
    path: "/orders/:orderId/refunds/:id",
    name: "OrderRefundDetail",
    props: true,
    component: () => import("../views/order").then(order => order.RefundDetail),
    meta: { requiresAuth: true },
  },
  {
    path: "/orders/:id/shipments",
    name: "OrderShipmentList",
    props: true,
    component: () => import("../views/order").then(order => order.ShipmentList),
    meta: { requiresAuth: true },
  },
]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
})


router.beforeEach((to, from, next) => {
  // routeHistory
  if (to.meta.requiresAuth) {
    const isAuthenticated = security.SecurityUserHolder.isAuthenticated()
    if (isAuthenticated) {
      next()
    } else {
      next("/login")
    }
  } else {
    next()
  }
})


export default router
